<template>
  <div class="container">
    <div class="music-page">
      <ul class="list switch">
        <li class="item">
          <div class="title">请选择是否开启背景音乐？</div>
          <div class="content"></div>
          <div class="icon">
            <switch :checked="isOpen" @click="changeSwitch"/>
          </div>
        </li>
      </ul>
      <ul class="list">
        <li class="item" v-for="(item, index) in musicList" :key="index">
          <div class="title">{{ index + 1 }}、{{ item.name }}</div>
          <div class="content"></div>
          <div class="icon" @click="musicStop(index)" v-if="isPlay && audioIndex == index">
            <span class="text">暂停</span>
            <img class="image" src="/static/images/icon/music-stop.png" alt="">
          </div>
          <div class="icon" @click="musicStart(index, item)" v-else>
            <span class="text">试听</span>
            <img class="image" src="/static/images/icon/music-start.png" alt="">
          </div>
          <div class="icon" @click="changeSelect(item.id)">
            <span class="text">选择</span>
            <img class="image" v-if="item.id == isSelect" src="/static/images/icon/select-start.png" alt="">
            <img class="image" v-else src="/static/images/icon/select-stop.png" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      /*
       * param  isOpen                是否开启背景音乐
       * param  isPlay                是否播放音乐
       * param  audioIndex            播放音乐的下标
       * param  isSelect              选择音乐的下标
       * param  innerAudioContext     播放音乐的容器
       * param  musicList             音乐列表
       * param  userInfo              用户信息
       */
      isOpen: false,
      isPlay: false,
      audioIndex: -1,
      isSelect: -1,
      innerAudioContext: wx.createInnerAudioContext(),
      musicList: [],
      userInfo: wx.getStorageSync('userInfo'),
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    res () {
      return this.$store.state.res;
    },
  },

  methods: {
    /*
     * 获取音乐
     */
    getMusic () {
      let self = this;
      self.$toast.show();
      self.$axios.getMusic({
        openId: 'system',
        module_id: 'music',
        module: 'music',
      }).then((res) => {
        self.$toast.hide();
        let data = res.data;
        if (0 === data.code * 1) {
          self.musicList = data.data;
        }
      })
    },
    /*
     * 是否开启背景音乐
     */
    changeSwitch () {
      let self = this;
      let text = this.isOpen ? '关闭中...' : '开启中...';
      this.$toast.show(text);
      this.$axios.switchMusic({
        id: self.userInfo.id,
        music_flag: !self.isOpen
      }).then((res) => {
        let data = res.data;
        if (0 === data.code * 1) {
          self.userInfo.music_flag = data.data.music_flag;
          wx.setStorageSync('userInfo', self.userInfo);

          self.isOpen = !!data.data.music_flag;
          self.$toast.show({
            title: self.isOpen ? '已开启' : '已关闭',
            icon: 'success',
            duration: 1500
          });
        }
      })
    },
    /*
     * 选择背景音乐
     */
    changeSelect (id) {
      if (this.isSelect == id) return;
      let self = this;
      this.$modal.show({
        content: '是否选择该背景音乐',
        success (res) {
          if (res.confirm) {
            self.$toast.show();
            self.$axios.switchMusic({
              id: self.userInfo.id,
              music_id: id,
            }).then((res) => {
              let data = res.data;
              if (0 === data.code * 1) {
                self.userInfo.music_id = data.data.music_id;
                wx.setStorageSync('userInfo', self.userInfo);

                self.isSelect = data.data.music_id;
                self.$toast.show({
                  title: '已完成',
                  icon: 'success',
                  duration: 1500
                });
              }
            })
          }
        }
      });
    },
    /*
     * 播放背景音乐
     */
    musicStart (index, item) {
      if (this.audioIndex !== index) {
        this.innerAudioContext.src = `${this.$confs.api}${item.path}`;
        this.innerAudioContext.loop = true;
      }
      this.audioIndex = index;
      this.isPlay = true;
      this.innerAudioContext.play();
    },
    /*
     * 暂停背景音乐
     */
    musicStop (index) {
      this.isPlay = false;
      if (this.audioIndex == index) {
        this.innerAudioContext.pause();
      }
      else {
        this.innerAudioContext.stop();
      }
    },
  },

  mounted () {
    this.isOpen = !!this.userInfo.music_flag;
    this.isSelect = this.userInfo.music_id;
    this.getMusic();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
